<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="referrer" content="no-referrer">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>网络收藏夹|书签库</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="layui/css/layui.css">
    <style type="text/css">


			.home-icon {
				width: 30px;
				height: 30px;
				margin-top: 16px;
				margin-left: 20px;
				cursor: pointer;
			}

			.header {
			    position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 60px;
                background-color: #0A0E11;
			}

			.center {
			    position: fixed;
                width: 100%;
                top: 60px;
                bottom: 44px;
                overflow: auto;
                padding: 15px;
			}

			.footer {
			    position: fixed;
                bottom: 0;
                width: 100%;
                text-align: center;
                height: 44px;
                line-height: 44px;
                background-color: #f5f7fa;
			}

			#logout {
                margin-top: 20px;
                margin-right: 20px;
                float: right;
			}

			.favoritesList {
			    display: flex;
                flex-wrap: wrap;
			}

			.favorites {
			    color: #606266;
			    margin: 0 10px 10px;
                cursor: pointer;
                border-radius: 4px;
                padding: 10px;
                background: #fff;
                box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
                border: 1px solid #EBEEF5;
			}

			.favorites .favorites-info {
			    display: flex;
                align-items: center;
                margin-bottom: 10px;
			}


			.favorites-info .bg {
			    width: 36px;
                height: 36px;
                line-height: 36px;
                margin-right: 10px;
                text-align: center;
			}

			.favorites-info .bg img {
                width: 100%;
                height: 100%;
                border: 0;
			}

			.favorites-info .title {
                width: 120px;
                height: 36px;
                line-clamp: 2;
                text-overflow: -o-ellipsis-lastline;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                line-clamp: 2;
                -webkit-box-orient: vertical;
			}

			.favorites .other-info {
                display: flex;
                justify-content: space-between;
                padding: 8px 0;
			}

			.other-info .layui-icon {
                margin-right: 5px;
			}

		    .layui-icon-username {
                color: #ff5722;
		    }

		    .layui-icon-star-fill {
                color: #ffb800;
		    }

		    .notFoundDiv {
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                display: flex;
                flex-direction: column;
                align-items: center;
            }

            .notFoundDiv img {
                width: 100px;
                height: 100px;
            }

            .notFoundDiv span{
                color: #333;
                margin: 20px 0;
            }
            
            /*修改提示框*/
            #myTitle {
                z-index: 9999999;
                position: absolute;
                color: #ffffff;
                max-width: 160px;
                font-size: 14px;
                padding: 4px;
                background: rgba(40, 40, 40, 0.8);
                border: solid 1px #e9f7f6;
                border-radius:5px;
            }

            em {
                font-style: normal;
            }

            .user em {
                width: 80px;
                display: inline-block;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .user, .support {
                display: flex;
                align-items: center;
            }

            .search-input {
                z-index: 999;
                position: absolute;
                top: 17px;
                left: 80px;
                width: 180px;
                height: 30px;
            }

            .search-input input {
                height: 100%;
                font-size: 12px;
                border: none;
                background-color: #161a1d;
                color: #b2b2b2;
                padding-left: 26px;
                padding-right: 26px;
            }

            .search-input .search-close {
                position: absolute;
                top: 4px;
                right: 4px;
                font-size: 20px;
                color: #666;
                display: none;
                cursor: pointer;
            }

            .search-input .search-icon {
                position: absolute;
                top: 8px;
                left: 6px;
                font-size: 14px;
                color: #999;
                cursor: pointer;
            }
		</style>
</head>
<body>
<div class="header">
    <a href="index.html"><img class="home-icon" src="images/home.svg" alt=""></a>
    <div class="search-input">
        <i id="search_icon" class="layui-icon layui-icon-search search-icon"></i>
        <input type="text" id="search_text" name="search_text" placeholder="搜索书签库..." autocomplete="off"
               class="layui-input">
        <i id="search_close" class="layui-icon layui-icon-close-fill search-close layui-anim layui-anim-fadein" style="display:none;"></i>
    </div>
    <button class="layui-btn layui-btn-xs" type="button" id="logout">退出</button>
</div>
<div class="center" id="center">
    <div class="favoritesList" id="favoritesList">

    </div>
</div>
<div class="footer">
    © 2020 网络收藏夹 || 网络收藏夹版权所有
</div>
<!-- 找不到结果 -->
<div id="notFoundDiv" class="notFoundDiv" style="display:none;">
    <img src="images/no_data.svg" alt="">
    <span>暂无共享记录，来做第一个共享的人吧...</span>
    <a href="index.html" class="layui-btn layui-btn-sm">回到首页</a>
</div>
<script src="layui/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="layui/layui.js"></script>
<script>
    layui.use(['layer','flow','util'], function() {
        var layer = layui.layer;
        var flow = layui.flow;
        var util = layui.util;

        // 加载动画
        layer.load();

        // 加载数据
        window.loadList = function(name){
            $("#favoritesList").empty();
            layer.load();
            flow.load({
                elem: '#favoritesList'
                ,scrollElem: '#center'
                ,isLazyimg: true
                ,mb: 400
                ,end: ' '
                ,done: function(page, next){
                  var lis = [];
                  $.ajax({
                        type: "GET",
                        url: "share/list",
                        data: {"name": name, "pageNum": page,"pageSize": 100},
                        dataType: "json",
                        headers:{"Authorization": "Bearer "+ localStorage.getItem("login_user_token")},
                        success: function (result) {
                            if(page == 1){
                                layer.closeAll('loading');
                                if (result.code == 0 && result.data.list.length > 0) {
                                    $("#notFoundDiv").hide();
                                }else{
                                    $("#notFoundDiv").show();
                                }
                            }
                            if (result.code == 0) {
                                $.each(result.data.list, function(index, item){
                                    var html = '';
                                    html += '<div class="favorites">';
                                    html += '   <div class="favorites-info">';
                                    html += '       <div class="bg">';
                                    html += '           <img src="images/book.svg" lay-src="' + item.icon + '">';
                                    html += '       </div>';
                                    html += '       <div class="title myToolTip" title="' + item.name + '"><a href="'+ item.url +'" target="_blank">' + item.name + '</a></div>';
                                    html += '   </div>';
                                    html += '   <div class="other-info">';
                                    html += '       <div class="user" title="'+ item.username +'"><i class="layui-icon layui-icon-username"></i><em>' + item.username + '</em></div>';
                                    html += '       <div class="support" data-id="' + item.id + '" data-support="' + (item.support == null? 0: item.support) + '" onclick="support(this)"><i class="layui-icon layui-icon-star-fill"></i><em>' + transform(item.support == null ?0 : item.support) + '</em></div>';
                                    html += '   </div>';
                                    html += '</div>';
                                    lis.push(html);
                                });
                                next(lis.join(''), page < result.data.pages);
                            }
                        }
                  });
                }
            });
        };

        loadList();

        // 固定块
        util.fixbar({
            top: true
            ,scrollElem: '#center'
            ,bgcolor: '#393D49'
            ,css: {right: 50, bottom: 60}
        });

        // 点击空白关闭
        $(document).on("click", function(e) {
            var _conss = $('.search-input');//点击的容器范围
            if (!_conss.is(e.target) && _conss.has(e.target).length === 0) {
                $("#search_close").hide();
            }
        });

        // jQuery全局拦截器
        $(document).ajaxSuccess(function(event,xhr,options){
            var result = xhr.responseJSON;
            if(result != undefined && result.code == "401"){
                window.location.href= "login.html";
            }
        });

        $(document).on("keydown", function(event){
            if(event.ctrlKey && event.key === "f"){
                $("#search_text").focus();
                // 阻止默认浏览器动作(W3C)
                var e = event;
                if ( e && e.preventDefault )
                    e.preventDefault();
                // IE中阻止函数器默认动作的方式
                else
                    window.event.returnValue = false;
                return false;
            }
        });

        window.initTitle = function(){
            var x = 10;
            var y = 20;
            var newTitle = '';
            $(document).on('mouseover','div.myToolTip',function (e) {
                newTitle = this.title;
                this.title = '';
                $('body').append('<div id="myTitle" >' + newTitle + '</div>');
                $('#myTitle').css({
                    'left': (e.pageX + x + 'px'),
                    'top': (e.pageY + y + 'px')
                }).show();
            });
            $(document).on('mouseout','div.myToolTip',function () {
                this.title = newTitle;
                $('#myTitle').remove();
            });
            $(document).on('mousemove','div.myToolTip',function (e) {
                $('#myTitle').css({
                    'left': (e.pageX + x + 10 + 'px'),
                    'top': (e.pageY + y - 20 + 'px')
                }).show();
            });
        };

        window.support = function(obj){
            layer.confirm('确认收藏书签吗？', function(index){
                layer.close(index);

                var id = $(obj).attr("data-id");
                var support = $(obj).attr("data-support");
                $.ajax({
                    type: "GET",
                    url: "share/support/" + id,
                    dataType: "json",
                    headers:{"Authorization": "Bearer "+ localStorage.getItem("login_user_token")},
                    success: function (result) {
                        layer.msg('收藏成功', {icon: 6});
                        if (result.code == 0) {
                            $(obj).find("em").text(transform(++support));
                        }
                    }
                });
            });
        };

        window.transform = function(value) {
            let newValue = ['', '', ''];
            let fr = 1000;
            const ad = 1;
            let num = 3;
            const fm = 1;
            while (value / fr >= 1) {
              fr *= 10;
              num += 1;
              console.log('数字', value / fr, 'num:', num);
            }
            if (num <= 4) { // 千
              newValue[1] = '千';
              newValue[0] = parseInt(value / 1000) + '';
            } else if (num <= 8) { // 万
              const text1 = parseInt(num - 4) / 3 > 1 ? '千万' : '万';
              // tslint:disable-next-line:no-shadowed-variable
              const fm = '万' === text1 ? 10000 : 10000000;
              newValue[1] = text1;
              newValue[0] = (value / fm) + '';
            } else if (num <= 16) {// 亿
              let text1 = (num - 8) / 3 > 1 ? '千亿' : '亿';
              text1 = (num - 8) / 4 > 1 ? '万亿' : text1;
              text1 = (num - 8) / 7 > 1 ? '千万亿' : text1;
              // tslint:disable-next-line:no-shadowed-variable
              let fm = 1;
              if ('亿' === text1) {
                fm = 100000000;
              } else if ('千亿' === text1) {
                fm = 100000000000;
              } else if ('万亿' === text1) {
                fm = 1000000000000;
              } else if ('千万亿' === text1) {
                fm = 1000000000000000;
              }
              newValue[1] = text1;
              newValue[0] = parseInt(value / fm) + '';
            }
            if (value < 1000) {
              newValue[1] = '';
              newValue[0] = value + '';
            }
            return newValue.join('');
        };

        // 登出
        $("#logout").click(function () {
            layer.confirm('确认退出系统吗？', function(index){
                layer.close(index);

                localStorage.clear();
                window.location.href = "login.html";
            });
        });

        $("#search_text").on("keydown", function(event){
            if(event.key === "Enter"){
                searchText();
            }
        }).on("focus", function () {
           $("#search_close").show();
        });

        $("#search_icon").click(function(){
            searchText();
        });

        window.searchText = function(){
            var text = $("#search_text").val().trim();
            loadList(text);
        };

        // 关闭搜索
        $("#search_close").click(function () {
            $(this).hide();
            $("#search_text").val("");
            loadList();
        });

        $(function(){
            // 初始化title
            initTitle();
        });
    });
</script>
</body>
</html>
